<template>
  <div class="notice-card">
    <div class="avatar">
      <div class="icon">📢</div>
    </div>
    <div class="content">
      <div class="title">{{ notice.noticeTitle }}</div>
      <div class="message">{{ notice.noticeContent }}</div>
      <div class="time">{{ notice.createTime }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { NoticeItem } from '@/types/notice'
import { formatDate } from '@/utils'

const props = defineProps<{
  notice: NoticeItem
}>()
</script>

<style lang="scss">
.notice-card {
  display: flex;
  padding: 24rpx;
  background-color: $notice-card-bg;
  border-radius: $notice-border-radius;
  box-shadow: $notice-shadow;
  transition: all 0.3s;
  margin-bottom: 20rpx;

  &:hover {
    transform: translateY(-3rpx);
    box-shadow: $notice-hover-shadow;
  }

  &.unread {
    border-left: 6rpx solid $notice-secondary-color;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    background-color: rgba(30, 136, 229, 0.1);

    .icon {
      font-size: 40rpx;
      color: $notice-primary-color;
    }
  }

  .content {
    flex: 1;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
      color: $notice-text-primary;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .message {
      font-size: 28rpx;
      color: $notice-text-secondary;
      margin-bottom: 8rpx;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      position: relative;
      padding-right: 100rpx;

      .expand-btn {
        position: absolute;
        right: 0;
        bottom: 0;
        color: $notice-primary-color;
        font-size: 24rpx;
        background: linear-gradient(to right, transparent, $notice-card-bg 70%);
        padding-left: 20rpx;
      }
    }

    .time {
      font-size: 24rpx;
      color: $notice-text-tertiary;
    }
  }
}
</style>
